<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>早报周年纪念</title>
        <script src="https://cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js"></script>
        <style type="text/css">
                *{margin:0;padding:0;border:0;}
                body{background-color:#eee;}	
                .infoImg{position:fixed;z-index: 10;width:100%;bottom:0;}
                .bgImg{width:100%;}
                .bottomWrap{position:fixed;bottom:0;z-index: 9;}
                #file{display:none;}
        </style>
</head>
<body>
        <div class="wrap">
                	<img class="infoImg" src="img/info.png"/>
                	 <canvas id="canvas"></canvas>
                	 <div class="bottomWrap">
                	       <input type="text" name="" id="name" value="输入名字" />
                        <input type="file" name="file" id="file" value=""/><label for="file">选择一张图片</label>
                        <button id="getCache">生成</button>
                   </div>
        </div>

        <script>
                var file = document.getElementById('file');
                
                file.onchange = function(e){
                        
                        
                };
               document.querySelector('.infoImg').onclick = function(){
                       this.style.display = "none";
               };
               
               var stage = new createjs.Stage('canvas'); 
               var canvas = stage.canvas;
               var wid = window.innerWidth;
               var high = window.innerHeight;
               canvas.width = wid;
               canvas.height = high;
               var headImg = new createjs.Bitmap("img/bg.png");
               stage.addChild(headImg);
               headImg.scaleX = wid/289;
               headImg.scaleY = wid/289;
               headImg.x = 0;
               headImg.y = 0;
               
               var indTxt = "";
               var contTxt = "发来贺电";
               var showTxt = new createjs.Text(indTxt+contTxt,"30px Arial");
               showTxt.y = wid*.4;
               showTxt.x = wid*.4;
               stage.addChild(showTxt);
               
               createjs.Ticker.addEventListener('tick',function(){     
                  stage.update();     
               });
       
               document.querySelector('#getCache').onclick = function(){
                       var img = document.createElement('img');
                       var getImg  = file.files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(getImg);
                        
                        reader.onload = function(e){
                               img.src = this.result;
                
                                var imgobj = new createjs.Bitmap(img);
                                var wh = imgobj.getBounds();
                                imgobj.y = wid*.6;
                                imgobj.scaleX = wid/wh.width;
                                imgobj.scaleY = wid/wh.height;
                                stage.addChild(imgobj);                  
                        };
                        
                       showTxt.text = document.querySelector('#name').value+"发来贺电";
                       stage.toDataURL();
               };
        </script>
</body>
</html>